点空的那一下，往往输在按钮之间那 8 个像素

看得见的那个矩形，和能点中的那个矩形不是同一个

成年人指腹压在屏幕上的接触面是一个椭圆，长轴 8 到 10 毫米，用指尖去点也有 7 毫米左右。iOS 人机界面指南给的 44pt、Material Design 给的 48dp，都不是设计师拍脑袋定的整数，是拿真人手指测出来的落点散布范围。

现在页面上流行细长的次级按钮：高 32px，字号 13px，看着精致。问题是视觉高度 32px，可点高度也是 32px，上下各缺 6px。网页制作时最省事的补法是把命中区和视觉区拆开——按钮本体维持 32px，再用一个绝对定位的伪元素铺在上面，top 和 bottom 各给 -6px，背景透明，热区就变成 44px，布局一点不动。

另一种写法是给按钮上下各加 6px 的 padding，再用 margin: -6px 0 把占位抵消回去。两种都行，区别在于伪元素那套不会被父级的 overflow 或 flex 对齐影响。图标按钮问题最大：一个 20px 的关闭叉，容器做成 24px，热区面积只有 44px 标准的四分之一，点三次中两次算运气好。

两个按钮贴在一起，中间那道缝才是安全带

热区各自都做到 48px，仍然会点错，因为它们之间没有缓冲。落点偏移 3 到 4px 就跨界，而手指本身的抖动就有这个量级。Material 的建议是相邻可点元素之间不小于 8dp，这条被忽略的频率比 48dp 那条高得多。

最典型的是分页器。数字按钮视觉 28×28，间距 4px，一排七八个挤在一起。改法不是把数字放大，是把每个数字的命中区撑到 44×44、间距提到 8px，这样一整条分页占宽会从 200px 涨到 310px，375px 的屏幕勉强放得下。放不下就别硬塞，换成「上一页 / 第几页输入框 / 下一页」三段式，或者干脆改成上拉加载。

工具条上的图标组同理。四个 24px 图标间距 4px，改成命中区 44px、间距 8px 之后总宽 200px，如果右上角塞不下，就把使用频率最低的两个收进溢出菜单，而不是把间距压回去。

拇指扫过的是一段弧，不是整块屏

单手握 6.1 到 6.7 英寸的机器时，拇指根部基本固定在屏幕右下角，能自然扫到的是一段圆弧，覆盖屏幕下方六成左右的面积。对角线上的那个角——右手握机时的左上角——要么换手，要么把机身往下滑一截再够，实际操作中大多数人会选择放弃。

所以主操作要往下放：提交、下一步、立即咨询、拨打电话，做成底部固定条最稳。往上放的应该是低频操作：返回、关闭、切换语言。网页制作里常见的错位是把「立即预约」放在首屏轮播图右上角，因为设计稿在 27 寸屏上看那个位置最醒目，到了手机上它正好落在最难够的区域。

但别把「难够到」当成防误触的手段。把删除按钮塞进右上角看似安全，实际上很多人是双手横握着看内容的，这时右上角正对右手拇指，反而成了误触高发区。防误触只能靠间距和二次确认，靠位置偏僻是靠不住的。

列表点整行，还是只点那几个字

随手一写的列表项通常是这样：li 里一个 a 标签包住标题文字，右边单独放一个箭头图标。标题文字 15px、一行占宽 200px、行高 21px，热区就是 200×21 这么大，右侧 130px 的空白连同那个箭头全是死区。而用户的习惯动作是伸手点整条。

正确做法是让 a 撑满整行：display 设成 block 或 flex，min-height 给 48px，左右 padding 16px，箭头放进同一个 a 里当作视觉提示。卡片式布局如果结构上不方便包，就在卡片里放一个绝对定位、四边归零的伪元素做覆盖层，让整张卡都可点。

覆盖层有个副作用要一起处理：卡片里如果还有第二个链接，比如底部的标签或者「收藏」小图标，它们会被覆盖层压在下面。给这些元素加 position: relative 和一个比覆盖层高的 z-index 就能抬出来，顺手把它们的热区也补到 40px 以上。

14 像素的复选框，靠 label 撑成一整行

原生 checkbox 和 radio 默认边长 13 到 16px，指腹一压把整个控件连同旁边的字都盖住了，命中全凭手感。把 label 用 for 关联上去，事情就解决一半：label 设 display: flex、align-items: center、min-height 44px，整行文字都成了触发区，热区从 14×14 变成 320×44，面积差了五十倍。

日历控件是同类问题的重灾区。容器宽 343px 时每列 49px，宽度是够的，坏就坏在很多主题把日格高度写成 32px，横着够宽竖着不够。改成 44px 之后六行日历高 264px，加上头部星期栏也就三百出头，一屏完全放得下，没有省的必要。

星级评分那五颗星也一样：星形本身 20px，但每颗要占 44px 宽的独立热区，五颗横排 220px。网页制作时如果为了好看把星星挤在 120px 里，用户想给 4 星，有一半概率给成 3 星或 5 星，这类误操作还很难被投诉出来，因为人只会觉得是自己手滑。

被浮层吃掉的最后一条内容

底部固定的咨询条高 56px，全面屏机器底部还有 34px 的安全区，加起来 90px 的高度永远盖在页面上。内容容器如果没有对应的下留白，列表最后一项、表单的提交按钮、页脚的备案号就会永久压在浮层底下，怎么滚都点不到。

给主容器写 padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px) 就能解决，注意别用固定的 90px，安全区高度各机型不一样，横屏时还会变成 0。检验方法很直白：把页面滚到最底，看最后一个可点元素的底边距离浮层顶边还剩多少，少于 8px 就当作被压住了。

右下角那个客服浮窗也要挪。它的默认位置经常正好盖住商品详情页的「加入购物车」或者列表页最后一张卡片的按钮，往上抬 80px，或者在页面向下滚动时收缩成半个圆贴边、停止滚动 1 秒后再展开，两种都比原地不动强。

危险操作不能和高频操作做邻居

后台列表里「编辑」和「删除」并排、间距 8px，一天点几十上百次，点错是迟早的事。处理办法有三档：把删除收进「更多」菜单里，是最彻底的；退一步是把两者间距拉到 24px 以上并且中间插一条分隔线；再退一步至少要有二次确认。

二次确认的弹窗本身也常出问题。确认框里「取消」和「确定」并排、间距 12px，等于把误触从一层挪到了另一层。把两个按钮改成上下排列、间距 16px，或者让「确定」需要长按 800ms 才生效，都比横排两颗挨着强。

还有反馈时机。手指按下到出现视觉变化，超过 200ms 用户就会认为没点上，于是再补一下，后台收到两条一样的订单。网页制作时必须给按钮写 :active 态而不是只写 :hover，触屏上 hover 会粘住不放，看起来像是按钮一直亮着。老模板如果 meta viewport 里缺了 width=device-width，浏览器还会给每次点击加 300ms 的双击缩放等待，这一行漏写的代价是全站所有按钮都慢半拍。

验收时把透明的热区画出来量一遍

热区是透明的，肉眼看不见，所以走查时永远发现不了。最省事的办法是在控制台跑一段样式注入，给 a、button、[role=button]、input、label 全部加上 1px 红色 outline，页面立刻现形：哪些按钮的红框比图标大不了多少，哪些红框之间完全没有缝，一眼可见。截图之后逐个量，低于 40px 的全部记下来。

接着要做真机测试，而且必须是没参与过这个项目的人。找 3 到 5 个人，用他们自己的手机，单手握着，站着或者边走边点，各自完整走一遍从首页到提交询盘的流程，只记两件事：点空的次数和点空的位置。二十分钟能测完，暴露出来的问题往往比一整轮内部走查还多。

浏览器的响应式模式替代不了这一步。鼠标光标是一个 1px 精度的点，手指是一块 8 毫米的面，前者在模拟器里怎么点都能中，后者在真机上会偏。网页制作的交付清单里如果只有还原度和加载速度两项，热区这类问题就会一直留到用户手上，而用户点空之后不会反馈，只会退出。